<template>
  <div id="cooked-food">
    <ContentField>
      <template v-slot:content-field-card-name>已完成</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div id="cooked-food-body" style="position: relative">
          <el-table
            :data="finished_order_item_list"
            stripe
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="foodName" label="菜品名称" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="finishTime" label="完成时间" />
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    store.dispatch("get_all_finished_order_item_by_chef_id", {
      token: store.state.user.jwt_token,
      chef_id: store.state.chef.id,
    });

    let finished_order_item_list = computed(() => {
      return store.state.order_item.finished_order_item_list;
    });

    return {
      finished_order_item_list,
    };
  },
};
</script>

<style scoped></style>
